<?php
/**
 * @file
 * Alpha's theme implementation to display a single Drupal page.
 */
//krumo('trang chu');
global $base_url;
//krumo($base_url);
$path = $base_url.'/'.path_to_theme();
//krumo($path);
$box = boxes_delta_load('home-slider');
//krumo($box);

$count = count($box->field_image_slider['und']);
//krumo($count);

$box_service_home = boxes_delta_load('home-services');
//krumo($box_service_home);

$box_service_home_2 = boxes_delta_load('home-services-2');
//krumo($box_service_home_2);

$box_footer = boxes_delta_load('footer');
//krumo($box_footer);

$box_map_home = boxes_delta_load('contact');
//krumo($box_map_home);


?>
<!-- Header
================================================== -->
<header id="header">

<!-- Container -->
<div class="container">

	<!-- Logo / Mobile Menu -->
	<div class="three columns">
	
		<div id="mobile-navigation">
			<form method="GET" id="menu-search" action="#" />
				<input type="text" placeholder="Start Typing..." />
			</form>
			<a href="#menu" class="menu-trigger"><i class="icon-reorder"></i></a>
			<span class="search-trigger"><i class="icon-search"></i></span>
		</div>

		<div id="logo">
			<h1><a href="<?php print $base_url ?>"><img src="<?php print $path?>/images/logo.png" /></a></h1>
		</div>
	</div>


<!-- Navigation
================================================== -->
<div class="thirteen columns">

	<nav id="navigation" class="menu">
		
		<?php 
                    $menu_tree = menu_tree_all_data('main-menu');
                    $menu_expander=menu_tree_output($menu_tree);
                    print render($menu_expander);
                    ?>
		
		
		<!--  <ul id="responsive">

			<li><a href="index.html" id="current">Home</a></li>
            


			<li><a href="#">About Us</a>
				<ul>
					<li><a href="about.html">About</a></li>
					<li><a href="team-profile.html">Team Profile</a></li>                    
					<li><a href="services.html">Services</a></li>
					<li><a href="faq.html">FAQ</a></li>
					<li><a href="404-page.html">404 Page</a></li>
                    <li><a href="pages-shortcodes.html">Shortcodes</a></li>
					<li><a href="typography.html">Typography</a></li>
					<li><a href="pricing-tables.html">Pricing Tables</a></li>
					<li><a href="icons.html">Icons</a></li>
				</ul>
			</li>


                    <li><a href="shop.html">Products </a>
                         <ul>
                         <li><a href="product-list.html">Product List</a></li>
                          <li><a href="product-detail.html">Product Detail</a></li>
                         </ul>
                      </li>


			<li><a href="#">Services</a>
				<ul>
					<li><a href="portfolio-3-columns.html">3 Columns</a></li>
					<li><a href="portfolio-4-columns.html">4 Columns</a></li>
					<li><a href="single-project-half.html">Single Project Half</a></li>
					<li><a href="single-project-wide.html">Single Project Wide</a></li>
				</ul>
			</li>

			<li><a href="#">Projects</a>
				<ul>
					<li><a href="blog-post.html">Blog Post</a></li>
                    <li><a href="blog-timeline.html">Blog Timeline</a></li>
					<li><a href="blog-full-post.html">Single Post</a></li>
				</ul>
			</li>

			<li><a href="contact.html">Contact</a></li>
			
			<!-- Search Form 		
			<li class="search-container">
				<div id="search-form">
					<form method="get" action="#" />
						<input type="text" class="search-text-box" />
					</form>
				</div>
			</li>
			
		</ul>-->
	</nav>
</div>

</div>
<!-- Container / End -->

</header>
<!-- Header / End -->


<!-- Content Wrapper / Start -->
<div id="content-wrapper">


<!-- Slider
================================================== -->
<div class="fullwidthbanner-container">
	<div class="fullwidthbanner">
		<ul>
		
		<?php 
		
		for($y=0; $y < $count; $y++){
			$field_id_image = field_collection_field_get_entity($box->field_image_slider['und'][$y]);
			//krumo($field_id_image);
			$image_slider =  image_style_url('home_slider', $field_id_image->field_image_field['und'][0]['uri']);
		
		
		
		
		?>
		
        	<!-- Slide 1 -->
			<li data-fstransition="fade" data-transition="fade" data-slotamount="10" data-masterspeed="300">
				<img src="<?php print $image_slider?>" alt="" />
				<!--  <div class="caption text sfb" data-x="0" data-y="150" data-speed="400" data-start="800" data-easing="easeOutExpo"><h2>   Lorem ipsum </h2></div>
				<div class="caption text sfb" data-x="1" data-y="190" data-speed="400" data-start="1000" data-easing="easeOutExpo"><h3> &nbsp;Lorem ipsum dolor </h3></div>
				<div class="caption text sfb" data-x="1" data-y="230" data-speed="400" data-start="1200" data-easing="easeOutExpo"><p>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> &nbsp;&nbsp;Phasellus nec eleifend erat. Etiam a pretium leo. Etiam gravida metus sed viverra auctor. </p></div>
				<div class="caption text sfb" data-x="1" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/safari-64.png" alt="" /></div>
				<div class="caption text sfb" data-x="80" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/firefox-64.png" alt="" /></div>
                <div class="caption text sfb" data-x="160" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/chrome-64.png" alt="" /></div>
				<div class="caption sfb" data-x="630" data-y="31" data-speed="600" data-start="1200" data-easing="easeOutExpo"><img src="<?php print $path?>/images/slider-01.png" alt="" /></div>
			--></li>
           <?php } ?> 
        
        	<!-- Slide 2 
			<li data-fstransition="fade" data-transition="fade" data-slotamount="10" data-masterspeed="300">
				<img src="<?php print $path?>/images/slider-02.jpg" alt="" />
				<div class="caption text sfb" data-x="0" data-y="150" data-speed="400" data-start="800" data-easing="easeOutExpo"><h2>   Lorem ipsum </h2></div>
				<div class="caption text sfb" data-x="1" data-y="190" data-speed="400" data-start="1000" data-easing="easeOutExpo"><h3> &nbsp;Lorem ipsum dolor </h3></div>
				<div class="caption text sfb" data-x="1" data-y="230" data-speed="400" data-start="1200" data-easing="easeOutExpo"><p>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> &nbsp;&nbsp;Phasellus nec eleifend erat. Etiam a pretium leo. Etiam gravida metus sed viverra auctor. </p></div>
				<div class="caption text sfb" data-x="1" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/safari-64.png" alt="" /></div>
				<div class="caption text sfb" data-x="80" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/firefox-64.png" alt="" /></div>
                <div class="caption text sfb" data-x="160" data-y="310" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/chrome-64.png" alt="" /></div>
				<div class="caption sfb" data-x="630" data-y="31" data-speed="600" data-start="1200" data-easing="easeOutExpo"><img src="<?php print $path?>/images/slider-01.png" alt="" /></div>
			</li>-->


			<!-- Slide 3 
			<li data-transition="fade" data-slotamount="10" data-masterspeed="300">
				<img src="<?php print $path?>/images/slider-09.jpg" alt="" />
				<div class="caption text sfb" data-x="0" data-y="170" data-speed="400" data-start="800" data-easing="easeOutExpo"><h2>Stay Connected</h2></div>
                <div class="caption sft" data-x="485" data-y="90" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/twitter.png" alt="" /></div>
				<div class="caption sft" data-x="485" data-y="160" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/evernote.png" alt="" /></div>
                <div class="caption sft" data-x="1100" data-y="230" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/youtube.png" alt="" /></div>
                <div class="caption sft" data-x="1100" data-y="300" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="<?php print $path?>/images/linkedin.png" alt="" /></div>
                
				<div class="caption text sfb" data-x="1" data-y="210" data-speed="400" data-start="1000" data-easing="easeOutExpo"><h3>The World in Your Hand</h3></div>
				<div class="caption text sfb" data-x="1" data-y="250" data-speed="400" data-start="1200" data-easing="easeOutExpo"><p>Perspiciatis unde omnis iste natus error sit voluptatem<br /> dolor laudantium totam rem aperiam eaque inventore verita</p></div>
				<div class="caption sfb" data-x="440" data-y="90" data-speed="600" data-start="1100" data-easing="easeOutExpo"><img src="<?php print $path?>/images/slider-10.png" alt="" /></div>
				<div class="caption sfb video" data-autoplay="false" data-x="600" data-y="112" data-speed="500" data-start="1100" data-easing="easeOutExpo"><iframe src="http://player.vimeo.com/video/35474102?title=0&amp;byline=0&amp;portrait=0;api=1&amp;color=ffffff" width="448" height="267"></iframe></div>
			</li>-->

		</ul>
	</div>
</div>


<!-- Featured Boxes
================================================== -->
<div class="punch_text2">
<!-- Container -->
<div class="container">

 



	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInLeft">
		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-laptop"></i><span></span></div>
			<div class="featured-desc">
 				<h3><span class="boldtext"><?php print $box_service_home->field_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_last_service_name['und'][0]['value']?></h3> 
				
				<p><?php print $box_service_home->field_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
    
    	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInUp">

		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-cogs"></i><span></span></div>
			<div class="featured-desc">
				<h3><span class="boldtext"><?php print $box_service_home->field_2_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_2_last_service_name['und'][0]['value']?></h3>
				<p><?php print $box_service_home->field_2_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
    
    	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInRight">

		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-magic"></i><span></span></div>
			<div class="featured-desc">
				<h3><span class="boldtext"><?php print $box_service_home->field_3_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_3_last_service_name['und'][0]['value']?></h3>
				<p><?php print $box_service_home->field_3_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
    
    	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInLeft">

		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-cloud-download"></i><span></span></div>
			<div class="featured-desc">
				<h3><span class="boldtext"><?php print $box_service_home->field_4_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_4_last_service_name['und'][0]['value']?></h3>
				<p><?php print $box_service_home->field_4_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
    
    	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInUp">

		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-rocket"></i><span></span></div>
			<div class="featured-desc">
				<h3><span class="boldtext"><?php print $box_service_home->field_5_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_5_last_service_name['und'][0]['value']?></h3>
				<p><?php print $box_service_home->field_5_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
    
    	<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInRight">

		<!-- First Style -->
		<div class="featured-box">
			<div class="circle-featured"><i class="icon-eye-open"></i><span></span></div>
			<div class="featured-desc">
				<h3><span class="boldtext"><?php print $box_service_home->field_6_first_service_name['und'][0]['value']?> </span> <?php print $box_service_home->field_6_last_service_name['und'][0]['value']?></h3>
				<p><?php print $box_service_home->field_6_description['und'][0]['value']?></p>
			</div>
		</div>

	</div>
	

</div>
<!-- Container / End -->
</div>



<!-- Container -->
<div class="container">

	<!-- Headline -->
<div class="fiveteen columns">
    <div class="container">
		<h3 class="headline"><span class="text_headline">Portfolio</h3>
		<span class="line" style="margin-bottom:35px;"></span>
	  </div>
			<ul class="grid cs-style">
				<?php 
                     $home_project = views_get_view('relative_products');
      $home_project -> set_display('block_1');
      $home_project ->set_arguments(array());
      $home_project -> execute();
      print  $home_project->render();
                    ?>
				
			</ul>
			<div class="clearfix"></div>
     </div>
</div>
<!-- Container / End -->

<br />
    
<div class="punch_text3">
                    
   <div class="container">
   
   <h3 class="big_headline" data-appear-top-offset="-100" data-animated="fadeInUp"><?php print $box_service_home_2->field_logan['und'][0]['value']?></h3>
    	<div class="features_02">

       <div class="eight columns left">
             <div class="one-two column" data-appear-top-offset="-100" data-animated="fadeInLeft">

		<!-- First Style -->
		<div class="promo-box">
			<div class="circle-portproject"><img src="<?php print image_style_url('icon-service-2',$box_service_home_2->field_1_thumbnail_service['und'][0]['uri'])?>" alt="services" /><span></span></div>
			<div class="promo-desc">
			
				<h3><?php print $box_service_home_2->field_1_service_name['und'][0]['value']?></h3>
				<p><?php print  $box_service_home_2->field_1_service_description['und'][0]['value']?> </p>
			</div>
		</div>

	</div>

	<div class="one-two column" data-appear-top-offset="-100" data-animated="fadeInLeft">

		<!-- Second Style -->
		<div class="promo-box">
			<div class="circle-portproject"><img src="<?php print image_style_url('icon-service-2',$box_service_home_2->field_2_thumbnail_service['und'][0]['uri'])?>" alt="services" /><span></span></div>
			<div class="promo-desc">
				<h3><?php print $box_service_home_2->field_2_service_name['und'][0]['value']?></h3>
				<p><?php print  $box_service_home_2->field_2_service_description['und'][0]['value']?> </p>
			</div>
		</div>

	</div>

	<div class="one-two column" data-appear-top-offset="-100" data-animated="fadeInLeft">

		<!-- Third Style -->
		<div class="promo-box">
			<div class="circle-portproject"><img src="<?php print image_style_url('icon-service-2',$box_service_home_2->field_3_thumbnail_service['und'][0]['uri'])?>" alt="services" /><span></span></div>
			<div class="promo-desc">
				<h3><?php print $box_service_home_2->field_3_service_name['und'][0]['value']?></h3>
				<p><?php print  $box_service_home_2->field_3_service_description['und'][0]['value']?> </p>
			</div>
		</div>
   </div>       
</div>
</div>
      	
   <div class="eight columns featuredimage" data-appear-top-offset="-100" data-animated="fadeInRight">
      <img src="<?php print image_style_url('large-image-service-2',$box_service_home_2->field_large_image['und'][0]['uri'])?>" alt="" />
    </div>
    </div>
</div>






<!-- Our Clients
================================================== -->
<!-- Container -->
<div class="container">

	
	<!-- ShowBiz Carousel -->
	<div id="our-clients" class="showbiz-container fourteen carousel columns">

	<!-- Portfolio Entries -->
	

</div>
<!-- Container / End -->
</div>
<!-- Content Wrapper / End -->

<!-- Footer
================================================== -->
<div id="footer">

	<!-- Container -->
	<div class="container">

		<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInLeft">
			<h3>About</h3>
			<?php 
			//$box_about = boxes_delta_load('contact');
			//krumo($box_);
			?>
			<p style="margin:0;"><?php print $box_footer->field_about_description['und'][0]['value']?></p>
		</div>

		

		<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInUp">
			<h3>Get In Touch</h3>
			<ul class="get-in-touch">
				<li><i class="icon-map-marker"></i> <p><?php print $box_footer->field_address['und'][0]['value']?></p></li>
			<li><i class="icon-user"></i> <p><?php print $box_footer->field_phone['und'][0]['value']?></p></li>
			<li><i class="icon-envelope-alt"></i> <p><?php print $box_footer->field_email['und'][0]['value']?></p></li>
			</ul>
		</div>
		
		<div class="one-third column" data-appear-top-offset="-100" data-animated="fadeInRight">
			<h3>My Place</h3>
			<p><?php print $box_footer->field_newsletter_description['und'][0]['value']?> </p>
			<?php print $box_map_home->field_google_map_home['und'][0]['value']?>
			
			
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer / End -->

<!-- Footer Bottom / Start -->
<div id="footer-bottom">

	<!-- Container -->
	<div class="container">

	  <div class="eight columns">Infinite Visual Pte Ltd © Copyright 2014. All Rights Reserved</div>
		<div class="eight columns">
			<ul class="social-icons-footer">
				<li><a href="#" class="tooltip top" title="Twitter"><i class="icon-twitter"></i></a></li>
				<li><a href="#" class="tooltip top" title="Facebook"><i class="icon-facebook"></i></a></li>
				<li><a href="#" class="tooltip top" title="Dribbble"><i class="icon-dribbble"></i></a></li>
				<li><a href="#" class="tooltip top" title="LinkedIn"><i class="icon-linkedin-rect"></i></a></li>
				<li><a href="#" class="tooltip top" title="RSS"><i class="icon-rss"></i></a></li>
			</ul>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer Bottom / Start -->

